<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-9TPG3QH67K"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-9TPG3QH67K');
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人介绍 - 苹果简约风格</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

  <!-- 全局样式和变量 -->
  <style>
    :root {
      --primary: #007aff;
      --text: #333;
      --muted: #666;
      --bg: #f5f7fa;
      --card-bg: #fff;
      --radius: 18px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      color: var(--text);
      line-height: 1.6;
      min-height: 100vh;
      padding-top: 70px;
      position: relative;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
  </style>
</head>
<body>
  <!-- ===== 导航栏模块 ===== -->
  <header>
    <nav>
      <div class="logo">
        <i class="fas fa-user-circle"></i>
        <span>个人介绍</span>
      </div>
      <ul class="nav-links">
        <li><a href="/" id="home-link">首页</a></li>
        <li><a href="my_files/about.html" id="about-link">关于我&nbsp;</a></li>
        <li>
          <a href="#" id="hobby-link">兴趣爱好</a>
          <ul class="dropdown">
            <li><a href="my_files/Chemistry teaching.html" id="chemistry-link"><i class="fas fa-flask"></i> 化学教学</a></li>
            <li><a href="my_files/technology teaching.html" id="tech-link"><i class="fas fa-laptop-code"></i> 技术教学</a></li>
            <li><a href="https://blog.csdn.net/2302_80018806?spm=1000.2115.3001.5343" id="blog-link"><i class="fab fa-blogger"></i> CSDN博客创作</a></li>
          </ul>
        </li>
        <li><a href="my_files/Specialty display.html" id="specialty-link">特长展示</a>
           <ul class="dropdown">
            <li><a href="my_files/Programming development.html" id="chemistry-link"><i class="fas fa-terminal"></i>r软件开发</a></li>
            <li><a href="my_files/" id="tech-link"><i class="fas fa-hands-helping"></i> 社会实践(开发）</a></li>
            <li><a href="my_files/" id="blog-link"><i class="fab fa-book"></i> 写作与诗词（开发）</a></li>
          </ul>
        </li>
        <li><a href="my_files/contact me.html" id="contact-link">联系我</a></li>
      </ul>
      <div class="menu-toggle"><i class="fas fa-bars"></i></div>
    </nav>
  </header>

  <style>
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      z-index: 1000;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
    }

    .nav-links {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 30px;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--text);
      font-weight: 500;
      padding: 8px 12px;
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav-links a:hover {
      color: var(--primary);
      background: rgba(0, 122, 255, 0.1);
    }

    /* 活动状态样式 */
    .nav-links a.active {
      color: var(--primary);
      background: rgba(0, 122, 255, 0.1);
    }

    .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      width: 200px;
      border-radius: var(--radius);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      padding: 10px 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s;
    }

    .nav-links li {
      position: relative;
    }

    .nav-links li:hover .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown a {
      display: block;
      padding: 10px 20px;
      font-size: 15px;
      transition: background 0.3s, color 0.3s;
    }

    .dropdown a:hover {
      background: #f1f5f9;
      color: var(--primary);
    }

    .menu-toggle {
      display: none;
      font-size: 24px;
      cursor: pointer;
    }

    @media (max-width: 900px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 70px;
        right: 0;
        padding: 20px;
        border-radius: var(--radius);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      }

      .nav-links.show {
        display: flex;
      }

      .menu-toggle {
        display: block;
      }
    }
  </style>

  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 获取当前页面路径
      const currentPage = window.location.pathname;

      // 根据当前页面为相应的导航链接添加活动状态
      if (currentPage === '/' || currentPage === '/index.html') {
        document.getElementById('home-link').classList.add('active');
      } else if (currentPage.includes('about.html')) {
        document.getElementById('about-link').classList.add('active');
      } else if (currentPage.includes('Chemistry teaching.html')) {
        document.getElementById('chemistry-link').classList.add('active');
        document.getElementById('hobby-link').classList.add('active');
      } else if (currentPage.includes('technology teaching.html')) {
        document.getElementById('tech-link').classList.add('active');
        document.getElementById('hobby-link').classList.add('active');
      } else if (currentPage.includes('Specialty display.html')) {
        document.getElementById('specialty-link').classList.add('active');
      } else if (currentPage.includes('contact me.html')) {
        document.getElementById('contact-link').classList.add('active');
      }
    });

    // 导航栏切换
    const toggleBtn = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');
    toggleBtn.addEventListener('click', () => {
      navLinks.classList.toggle('show');
    });
  </script>

  <!-- ===== 头部模块（视频背景 + 弹性滚动渐隐 + 渐变色动态 + 微动） ===== -->
  <section class="ezy__header22_9Wbn5LJN">
    <!-- 视频背景 -->
    <video autoplay loop muted playsinline webkit-playsinline x5-playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" preload="auto" controlslist="nodownload" disablepictureinpicture class="video-bg" id="header-video">
      <source src="/img/video/nyd.mp4" type="video/mp4">
      <source src="source/video/index_01.webm" type="video/webm">
      您的浏览器不支持视频标签。
    </video>

    <!-- 渐变叠加层 -->
    <div class="video-overlay" id="video-overlay"></div>

    <!-- 内容层 -->
    <div class="container position-relative h-100 d-flex flex-column justify-content-center">
      <div class="row justify-content-start align-items-center h-100">
        <!-- 左侧文字区域 -->
        <div class="col-lg-6 text-center text-lg-start hero-content" id="hero-content">
          <h1 class="ezy__header22_9Wbn5LJN-heading">个人无限</h1>
          <p class="ezy__header22_9Wbn5LJN-sub-heading">我渴望无限可能，无惧失败与挑战。生命不息，成长不止。愿突破所有限制，探索未知，拥抱无限，活出最自由丰盛的自己。</p>
          <a href="https://mail.163.com/js6/main.jsp?sid=bLKkoawwVgISvOHOYVUPqEjJjAnIgWUH&df=mail163_letter#module=compose.ComposeModule%7C%7B%22type%22%3A%22compose%22%2C%22fullScreen%22%3Atrue%2C%22cid%22%3A%22c%3A1757532273362%22%7D" class="ezy__header22_9Wbn5LJN-btn btn mt-3">与我对话</a>
        </div>
      </div>
    </div>
  </section>

  <style>
    .ezy__header22_9Wbn5LJN {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    /* 视频背景样式 */
    .video-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      transform: translateY(0);
      transition: transform 0.1s linear;
    }

    /* 渐变叠加层 */
    .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.65));
      z-index: -1;
      transition: background 0.15s linear;
    }

    /* 文本样式 */
    .hero-content {
      color: #ffffff;
      transform: translateY(0);
      transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    }

    .ezy__header22_9Wbn5LJN-heading {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 20px;
      opacity: 0;
      animation: fadeInLeft 1s ease-out forwards;
    }

    .ezy__header22_9Wbn5LJN-sub-heading {
      font-size: 1.25rem;
      line-height: 1.6;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeInLeft 1s ease-out 0.35s forwards;
    }

    .ezy__header22_9Wbn5LJN-btn {
      font-weight: 600;
      padding: 12px 36px;
      border-radius: 30px;
      font-size: 1rem;
      background: linear-gradient(90deg, #ff5f00, #ffbc00);
      color: #fff;
      border: none;
      box-shadow: 0 8px 24px rgba(255, 188, 0, 0.4);
      transition: all 0.3s ease;
      opacity: 0;
      animation: fadeInLeft 1s ease-out 0.7s forwards;
    }

    .ezy__header22_9Wbn5LJN-btn:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 36px rgba(255, 188, 0, 0.6);
    }

    /* 动画效果：从左侧淡入 */
    @keyframes fadeInLeft {
      0% { opacity: 0; transform: translateX(-50px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    /* 响应式调整 */
    @media (max-width: 991px) {
      .ezy__header22_9Wbn5LJN-heading {
        font-size: 2.2rem;
      }
      .ezy__header22_9Wbn5LJN-sub-heading {
        font-size: 1rem;
      }
      .ezy__header22_9Wbn5LJN-btn {
        padding: 10px 24px;
        font-size: 0.95rem;
      }
    }
  </style>

  <script>
    // 弹性滚动函数
    function lerp(start, end, amt){
      return (1-amt)*start + amt*end;
    }

    let lastScroll = 0;
    let currentScroll = 0;

    // 检测是否在微信浏览器中
    function isWechatBrowser() {
      return /micromessenger/i.test(navigator.userAgent);
    }

    // 检测是否为微信8.0.62版本
    function isWechat8062() {
      return /micromessenger\/8\.0\.62/i.test(navigator.userAgent);
    }

    // 检测视频是否可以播放，如果不能播放则添加相关类名
    function checkVideoPlayback() {
      const video = document.getElementById('header-video');

      // 微信8.0.62版本特殊处理
      if (isWechat8062()) {
        // 添加微信8.0.62浏览器特定属性
        video.setAttribute('x5-video-player-type', 'h5');
        video.setAttribute('x5-video-player-fullscreen', 'true');
        video.setAttribute('x5-video-orientation', 'portraint');
        video.setAttribute('preload', 'auto');
        video.setAttribute('controlslist', 'nodownload');
        video.setAttribute('disablepictureinpicture', '');

        // 微信8.0.62版本中延迟播放视频
        setTimeout(() => {
          // 先暂停再播放，解决微信8.0.62版本的播放问题
          video.pause();
          video.load();

          setTimeout(() => {
            const playPromise = video.play();
            if (playPromise !== undefined) {
              playPromise.then(() => {
                console.log('微信8.0.62版本视频播放成功');
                // 播放成功后隐藏视频控件
                video.removeAttribute('controls');
              }).catch(error => {
                console.log('微信8.0.62版本视频播放失败:', error);
                // 播放失败时显示控件让用户手动播放
                video.setAttribute('controls', '');
                // 设置海报图片作为后备方案
                video.setAttribute('poster', 'source/index_imgs/wx.jpg');
              });
            }
          }, 100);
        }, 500);
      }
      // 微信浏览器特殊处理（非8.0.62版本）
      else if (isWechatBrowser()) {
        // 添加微信浏览器特定属性
        video.setAttribute('x5-video-player-type', 'h5');
        video.setAttribute('x5-video-player-fullscreen', 'true');
        video.setAttribute('x5-video-orientation', 'portraint');
        video.setAttribute('preload', 'auto');

        // 微信浏览器中延迟播放视频
        setTimeout(() => {
          video.play().then(() => {
            console.log('微信浏览器视频播放成功');
          }).catch(error => {
            console.log('微信浏览器视频播放失败:', error);
            // 在微信中添加poster属性作为后备方案
            video.setAttribute('poster', 'source/index_imgs/wx.jpg');
          });
        }, 300);
      }
      // 非微信浏览器的处理
      else {
        const playPromise = video.play();

        if (playPromise !== undefined) {
          playPromise.then(_ => {
            // 视频播放成功
            console.log('视频播放成功');
          }).catch(error => {
            // 视频播放失败
            console.log('视频播放失败:', error);
          });
        }
      }
    }

    function updateHeader() {
      currentScroll = window.scrollY;

      // 平滑滚动值
      lastScroll = lerp(lastScroll, currentScroll, 0.08);

      const video = document.getElementById('header-video');
      const heroContent = document.getElementById('hero-content');
      const overlay = document.getElementById('video-overlay');

      // 视频微动比例
      video.style.transform = `translateY(${lastScroll * 0.08}px)`;

      // 文字微动比例
      heroContent.style.transform = `translateY(${lastScroll * 0.04}px)`;

      // 文字渐隐渐显：0-300px
      const maxTextScroll = 300;
      const textOpacity = Math.max(0, 1 - lastScroll / maxTextScroll);
      heroContent.style.opacity = textOpacity;

      // 动态叠加层：滚动 0-500px
      const maxOverlayScroll = 500;
      const overlayOpacity = Math.min(0.65, lastScroll / maxOverlayScroll * 0.65);

      // 渐变色微调（偏暖橙/偏冷蓝）
      const warmFactor = Math.min(1, lastScroll / maxOverlayScroll);
      const r = Math.floor(0 + 255 * warmFactor * 0.1);
      const g = Math.floor(0 + 200 * warmFactor * 0.05);
      const b = Math.floor(0 + 255 * (1 - warmFactor) * 0.05);

      overlay.style.background = `linear-gradient(to bottom, rgba(${r},${g},${b},${overlayOpacity*0.0}), rgba(${r},${g},${b},${overlayOpacity}))`;

      requestAnimationFrame(updateHeader);
    }

    // 在页面加载完成后检查视频播放
    document.addEventListener('DOMContentLoaded', function() {
      // 等待一小段时间再检查视频播放，确保视频元素已准备好
      setTimeout(checkVideoPlayback, 500);
    });

    requestAnimationFrame(updateHeader);
  </script>

  <main class="container">
    <!-- ===== 个人简介模块 ===== -->
    <section class="hero">
      <div class="hero-content">
        <img src="img/me_2025-09-06_095025_068.jpg" class="profile-img avatar-circle avatar-small"/>
        <h1>张昌智</h1>
        <p>个人简介</p>
        <div class="profile-card">
          <p>
            我是一个刚刚走过高三岁月的毕业生，带着三年的积淀与成长，即将踏上新的征程。高中三年是我人生中极为重要的一段旅程，它不仅塑造了我的知识结构，更磨练了我的心智与品格。面对繁重的课业与紧张的备考，我始终保持积极乐观的心态，在不断挑战自我的过程中，学会了坚持与自律，也逐渐形成了自信从容的态度。

学习方面，我注重方法与效率，善于在反思中寻找进步的空间。无论是理科的逻辑推理，还是文科的人文积淀，我都力求做到全面发展。在课堂上，我敢于提问，勇于表达自己的观点；在课后，我喜欢整理笔记，总结知识脉络，这让我在学习过程中保持了清晰的思路和稳定的成绩。

生活中，我是一个乐观开朗的人，善于与同学沟通合作，也愿意为集体贡献力量。无论是班级活动的组织，还是团队任务的分工，我都能积极参与并发挥作用。三年来，我不仅收获了知识，也收获了珍贵的友情和责任感。

兴趣爱好方面，我喜欢阅读和运动。阅读让我开阔了视野，提升了思考深度；运动则让我保持活力，学会在竞争中磨炼意志。我相信，全面的兴趣和健康的生活习惯，会让我在未来的学习和人生道路上更加稳健。

作为新时代的青年，我深知自己肩负的使命。未来，无论走向何方，我都将保持自信、努力和坚持，用所学的知识和积累的力量，去迎接更广阔的天地。高三毕业不是终点，而是新的起点，我愿以坚定的信念和积极的心态，去书写属于自己的青春篇章。
          </p>
        </div>
      </div>
    </section>

    <style>
      /* ===== 主页区域 ===== */
      .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
        padding: 60px 0;
        position: relative;
      }

      .profile-img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
      }

      .hero-content {
        max-width: 700px;
      }

      .hero-content h1 {
        font-size: 2.8rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #1d1d1f;
      }

      .hero-content > p {
        font-size: 1.2rem;
        color: var(--muted);
        font-weight: 500;
      }

      .profile-card {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        border-radius: var(--radius);
        padding: 30px;
        margin-top: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      }

      .profile-card p {
        color: #000000; /* 将文字颜色设置为黑色 */
        font-size: 1rem;
        line-height: 1.8;
        text-align: justify;
      }
    </style>

    <!-- ===== 兴趣爱好模块 ===== -->
    <section>
      <h2 class="section-title">我的兴趣爱好</h2>
      <div class="interests">
        <article class="interest-card">
          <h3><i class="fas fa-flask"></i> 化学教学</h3>
          <p>擅长将复杂的化学概念转化为易于理解的知识点，注重实验教学和安全意识培养。</p>
        </article>
        <article class="interest-card">
          <h3><i class="fas fa-laptop-code"></i> 技术教学</h3>
          <p>教授编程和数字技能，帮助学生掌握21世纪必备的技术能力，涵盖基础到高级编程。</p>
        </article>
        <article class="interest-card">
          <h3><i class="fab fa-blogger"></i> CSDN博客创作</h3>
          <p>在CSDN平台分享技术文章和教学心得，关注人工智能与教育技术的融合应用。</p>
        </article>
      </div>
    </section>

    <style>
      /* ===== 兴趣爱好 ===== */
      .section-title {
        font-size: 2rem;
        font-weight: 600;
        margin: 60px 0 30px;
        text-align: center;
        color: #1d1d1f;
      }

      .interests {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
      }

      .interest-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .interest-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }

      .interest-card h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        color: #1d1d1f;
      }

      .interest-card h3 i {
        margin-right: 10px;
        color: var(--primary);
      }

      .interest-card p {
        color: #86868b;
        line-height: 1.6;
      }
    </style>
  </main>

  <!-- ===== 页脚模块 ===== -->
  <footer>
    <div class="container">
      <p>© 2025 个人介绍页面 · 苹果简约风格设计</p>
      <p>联系方式: 15367447249 | 邮箱: zczaya@163.com</p>
    </div>
  </footer>

  <style>
    /* ===== 页脚 ===== */
    footer {
      text-align: center;
      padding: 30px 0;
      margin-top: 60px;
      color: #86868b;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
  </style>

  <div id="particles-js"></div>

  <!-- 引入particles.js库并初始化粒子背景 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      particlesJS('particles-js', {
        particles: {
          number: {
            value: 100,
            density: {
              enable: true,
              value_area: 800
            }
          },
          color: {
            value: '#3b82f6' // 蓝色粒子
          },
          shape: {
            type: 'circle',
            stroke: {
              width: 0,
              color: '#000000'
            }
          },
          opacity: {
            value: 0.6,
            random: true,
            anim: {
              enable: true,
              speed: 1,
              opacity_min: 0.1,
              sync: false
            }
          },
          size: {
            value: 4,
            random: true,
            anim: {
              enable: true,
              speed: 2,
              size_min: 0.1,
              sync: false
            }
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: '#3b82f6', // 蓝色连线
            opacity: 0.3,
            width: 1
          },
          move: {
            enable: true,
            speed: 1,
            direction: 'none',
            random: true,
            straight: false,
            out_mode: 'out',
            bounce: false,
            attract: {
              enable: false,
              rotateX: 600,
              rotateY: 1200
            }
          }
        },
        interactivity: {
          detect_on: 'canvas',
          events: {
            onhover: {
              enable: true,
              mode: 'grab'
            },
            onclick: {
              enable: true,
              mode: 'push'
            },
            resize: true
          },
          modes: {
            grab: {
              distance: 140,
              line_linked: {
                opacity: 1
              }
            },
            push: {
              particles_nb: 4
            }
          }
        },
        retina_detect: true
      });
    });
  </script>
</body>
</html>